﻿(function () {
    "use strict";
    var that;
    var filter, list, editForm;
    
    var vm = new Vue({
        el: '#root',
        created: function () {
        },
        methods: {
            add: function () {                
                editForm.showNew();
            }
        },
        mounted: function () {
            that = this;
            var collection = new PersonCollection();

            filter = that.$refs.filter;
            list = that.$refs.list;
            editForm = that.$refs.editForm;

            list.init(collection);
            editForm.init(collection);

            //events
            filter.$on("queryClick", function (query) {
                list.fetch(query);
                editForm.hide();
            });

            list.$on("editClick", function (person) {
                editForm.bind(person);
            });            

            editForm.$on("saveClick", function (person) {
                list.reload();
            });

            list.fetch();
        }
    });
})();